import Button, { type ButtonProps } from '@material-ui/core/Button';

const style = {
  root: {
    borderRadius: 3,
    border: 0,
    color: 'white',
    margin: '0 20px',
  },
  inherit: {},
  primary: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  },
  secondary: {
    background: 'linear-gradient(45deg, #2196f3 30%, #21cbf3 90%)',
  },
  default: {},
};

export default function CustomButton(props: ButtonProps) {
  return (
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    <Button {...props} style={{ ...style.root, ...style[props.color!] }}>
      {props.children}
    </Button>
  );
}
